<template>
  <div class="carousel-wrapper" v-if="list?.commentList.length">
    <el-carousel
      ref="carousel"
      height="35PX"
      :autoplay="true"
      :interval="3500"
      :loop="true"
      direction="vertical"
      @change="handleChange"
    >
      <el-carousel-item
        v-for="(item, index) in list?.commentList"
        :key="index"
      >
        <div class="carousel-item" :style="getItemStyle(index)">
          <div class="text-cut cont " v-if="list.style=='2'" :style="style">{{ item?.userName }}  {{ item?.content }} </div>
          <div class="text-cut flex items-center cont " v-if="list.style=='1'" :style="style">
            <img :src="item?.headPortrait" class="w-[20PX] h-[20PX] mr-[4PX] rounded-full " style="flex-shrink: 0;" />
            <div class="text-cut text-[#fff]">{{ item?.content }}</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getLanguage } from "@/utils/langue";

const props = defineProps({
  style: {
    type: String || Object,
    default: 'background-color: #FF5F2C; color: #fff; width:300PX; border-radius:45PX; font-size: 12px; line-height: 35PX; padding:0 15PX'
  },
  product: {
    type: Object,
    required: true,
    default: () => {
    }
  },
  list:{
    type: Object,
    required: false,
    default: () => {}
  }
});

const currentIndex = ref(0);

const handleChange = (index: number) => {
  currentIndex.value = index; // 更新当前索引
};

const getItemStyle = (index: number) => {
  return {
    opacity: index === currentIndex.value ? 0.93 : 0,
    transition: 'opacity 0.5s', // 添加过渡效果
    height: '100%', // 确保高度占满
    // display: 'flex',
    // alignItems: 'center',
    // justifyContent: 'center',
  };
};
</script>

<style>
.carousel-wrapper {
  position: absolute;
  z-index: 999; /* 设置z-index为999 */
  top: 30PX; /* 根据需要设置top */
  left: 15PX; /* 根据需要设置left */
  right: 0; /* 根据需要设置right */
  bottom: 0; /* 根据需要设置bottom */
  width: 100%;
  height: 35PX;
}

.carousel-item {
  height: 100%; /* 使每个项的高度占满父容器 */
}

</style>